<template>
  <el-link v-show="!isCollapse" @click="goHome">通用后台管理</el-link>
  <el-link v-show="isCollapse" @click="goHome">后台</el-link>
  <el-menu
    active-text-color="#ffd04b"
    background-color="#545c64"
    class="el-menu-vertical-demo"
    default-active="2"
    text-color="#fff"
    :collapse="isCollapse"
    router
  >
    <el-menu-item
      :index="item.path"
      v-for="item in nochildren()"
      :key="item.path"
    >
      <el-icon><component :is="item.icon"></component></el-icon>
      <span>{{ item.label }}</span>
    </el-menu-item>
    <el-sub-menu
      :index="item.path"
      v-for="item in hasChildren()"
      :key="item.path"
    >
      <template #title>
        <el-icon><component :is="item.icon"></component></el-icon>
        <span>{{ item.label }}</span>
      </template>
      <el-menu-item
        :index="child.path"
        v-for="child in item.children"
        :key="child.path"
        >{{ child.label }}</el-menu-item
      >
    </el-sub-menu>
  </el-menu>
</template>
<script setup>
import { storeToRefs } from "pinia";
import { useRouter } from "vue-router";
import { useCommonStateStore } from "../stores/counter.js";

const store = useCommonStateStore();
let { isCollapse } = storeToRefs(store);

console.log("isCollapse", isCollapse);

let router = useRouter();
const goHome = () => {
  router.push("/home");
};

const menus = [
  {
    path: "/user",
    name: "user",
    label: "用户管理",
    icon: "user",
    url: "UserManage/UserManage",
  },
  {
    path: "/disease_type",
    name: "disease_type",
    label: "疫病类型",
    icon: "user",
    url: "Disease_type/Disease_type",
  },
  {
    path: "/animals_species_management",
    name: "animals_species_management",
    label: "动物种类管理",
    icon: "user",
    url: "Animals_species_management/Animals_species_management",
  },
  {
    label: "疫苗管理",
    icon: "location",
    path: "/vaccine_management",
    children: [
      {
        path: "/vaccine_management/vaccine_quantity",
        name: "vaccine_quantity",
        label: "疫苗数量",
        icon: "setting",
        url: "Vaccine_management/Vaccine_quantity",
      },
      {
        path: "/vaccine_management/vaccine_type",
        name: "vaccine_type",
        label: "疫苗种类",
        icon: "setting",
        url: "Vaccine_management/Vaccine_type",
      },
    ],
  },

  {
    label: "物资管理",
    icon: "location",
    path: "/materials_management",
    children: [
      {
        path: "/materials_management/material_transportation_tracking",
        name: "material_transportation_tracking",
        label: "物资运输跟踪",
        icon: "setting",
        url: "Materials_management/Material_transportation_tracking",
      },
      {
        path: "/materials_management/materials_quantity",
        name: "materials_quantity",
        label: "物资数量",
        icon: "setting",
        url: "Materials_management/Materials_quantity",
      },
    ],
  },
];
const nochildren = () => {
  const rtn = menus.filter((item) => !item.children);
  console.log(rtn);
  return rtn;
};
const hasChildren = () => {
  const rtn = menus.filter((item) => item.children);
  console.log(rtn);
  return rtn;
};
</script>
<style lang="less" scoped>
.el-menu {
  // height: 100%;
  flex: 1;
  border-right: 0;
}
.el-menu:not(.el-menu--collapse) {
  width: 200px;
}
.el-link {
  line-height: 6rem;
  text-align: center;
  background-color: @color-deep-dark;
  color: @color-font-normal;
  font-size: @font-size-big;
  font-weight: 700;
  width: 100%;
}
</style>
